*{
  padding: 0;
  margin: 0;
}
// 清除浮动
.clear {
  clear: both;
}

.box{
  width: 700px;
  height: 530px;
  border: 1px solid #ccc;
  margin: 50px auto;
  // 聊天框
  .chats{
    height: 400px;
    overflow: auto;
    border: 1px solid #ccc;
    padding: 10px;
    background: url('./images/bgd.jpg') no-repeat;
    background-size: 100%;
  }
  .chat{
    width: 100%;
    // 左边
    .chat_left{
      .img{
        border-radius: 50%;
        width: 50px;
        height: 50px;
        vertical-align:middle
      }
      .content_left{
        color: #000;
        display: inline-block;
        background-color: #EEEEEE;
        padding: 10px 10px;
        margin: 10px 0px 5px 5px;
        border-radius: 4px;
        .triangle-left {
          display: inline-block;
          width: 0;
          height: 0;
          border-top: 10px solid transparent;
          border-right: 15px solid #EEEEEE;
          border-bottom: 10px solid transparent;
          margin-left: -15px;
        }
      }
    }
    // 右边
    .chat_right{
      float: right;
      .img{
        border-radius: 50%;
        width: 50px;
        height: 50px;
        vertical-align:middle
      }
      .content_right{
        color: #fff;
        display: inline-block;
        background-color: #2681F2;
        padding: 10px 10px;
        margin: 10px 0px 5px 0px;
        border-radius: 4px;
        .triangle-right {
          display: inline-block;
          width: 0;
          height: 0;
          border-top: 10px solid transparent;
          border-left: 15px solid #2681F2;
          border-bottom: 10px solid transparent;
          margin-right: -15px;
        }
      }
    }
  }
  // 输入框
  .input{
    height: 130px;
    textarea{
      width: 100%;
      resize: none;
      border: none;
    }
    p{
      padding: 0;
      text-align: right;
      button{
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 5px 10px;
        background: #0188FB;
      }
    }
  }
}